<template>
  <div class="statistics" name="statistics">
    <div class="statistics-item" v-for="(item, key) in dataList" :key="key">
      <div class="item-left">
        <span class="tit">{{ item.label }}</span>
        <span class="num-box">
          <i class="num">{{ item.count }}</i>
          <i class="dw">条</i>
        </span>
        <StatusIcon :type="key" :mom="item.mom"></StatusIcon>
      </div>
      <div class="item-right" :ref="setRef(key)"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getLast12MonthsProjectTasks, last12Months, getLast12MonthsReports } from "@/api/modules/home";
import { projectProblemLast12Months } from "@/api/modules/project";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
import StatusIcon from "./StatusIcon.vue";

const dataList = ref([
  { label: "本月任务", fetchData: getLast12MonthsProjectTasks, count: "", mom: "", list: {}, color: "#74D98C" },
  { label: "本月问题", fetchData: projectProblemLast12Months, count: "", mom: "", list: {}, color: "#5378F6" },
  { label: "本月项目", fetchData: last12Months, count: "", mom: "", list: {}, color: "#F8D27C" },
  { label: "本月日报", fetchData: getLast12MonthsReports, count: "", mom: "", list: {}, color: "#F56C6C" }
]);

// 初始化图标数据
const chartRefs = ref<(HTMLElement | null)[]>([]);
const setRef = (index: number) => (el: HTMLElement) => {
  chartRefs.value[index] = el;
};

const initDatas = async () => {
  for (let i = 0; i < dataList.value.length; i++) {
    const tempList = (await fetchData(dataList.value[i].fetchData)) || [];
    dataList.value[i]["mom"] = tempList[tempList.length - 1].mom;
    dataList.value[i]["count"] = tempList[tempList.length - 1].count;
    dataList.value[i]["list"] = tempList;
  }
};
const fetchData = async (fn: Function) => {
  const { data } = await fn();
  return data;
};

const initChart = async () => {
  const option = {
    grid: { left: 5, right: 5, top: 0, bottom: 0 },
    xAxis: { show: true, axisLabel: { color: "#333333", interval: 0 } },
    yAxis: { show: false },
    series: [{ type: "bar", data: [], itemStyle: {}, emphasis: { disabled: true } }]
  };

  chartRefs.value.map((chartRef, index) => {
    option.xAxis["data"] = dataList.value[index]["list"].map(item => item.yearMonth);
    option.series[0]["data"] = dataList.value[index]["list"].map(item => item.count + 0.2);
    option.series[0]["itemStyle"] = {
      color: (params: any) => (params.dataIndex === 11 ? dataList.value[index]["color"] : "#ECF1F5")
    };
    const myChart: echarts.ECharts = echarts.init(chartRef as HTMLElement);
    useEcharts(myChart, option);
  });
};

onMounted(async () => {
  await initDatas();
  initChart();
});
</script>
<style scoped lang="scss">
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
i {
  font-style: normal;
}
.statistics {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  .statistics-item {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    padding: 20px 30px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    &:last-child {
      margin-right: 0;
    }
  }
  .item-left {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin-right: 46px;
    font-size: 16px;
    color: #333333;
    .tit {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    .num {
      font-size: 32px;
      font-weight: 600;
      color: #333333;
    }
    .dw {
      margin-left: 12px;
      font-size: 12px;
      color: #999999;
    }
    .num-box {
      padding: 16px 0;
    }
  }
  .item-right {
    width: 100px;
    height: 80px;
  }
}
</style>
